import React from 'react';
import { Card, Typography, Form, Input, Button, Avatar, Row, Col } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Title } = Typography;

const ProfilePage = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('更新资料:', values);
  };

  return (
    <div className="profile-page">
      <Title level={2}>个人资料</Title>
      
      <Row gutter={[24, 24]}>
        <Col xs={24} lg={16}>
          <Card title="基本信息">
            <Form
              form={form}
              layout="vertical"
              onFinish={onFinish}
              initialValues={{
                username: 'testuser',
                email: 'test@example.com',
              }}
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[
                  { required: true, message: '请输入用户名' },
                  { min: 3, message: '用户名长度至少3位' },
                ]}
              >
                <Input prefix={<UserOutlined />} />
              </Form.Item>

              <Form.Item
                label="邮箱"
                name="email"
                rules={[
                  { required: true, message: '请输入邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存修改
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        
        <Col xs={24} lg={8}>
          <Card title="账户信息">
            <div className="account-info">
              <div className="avatar-section">
                <Avatar size={64} icon={<UserOutlined />} />
                <h3>testuser</h3>
                <p>免费用户</p>
              </div>
              
              <div className="usage-info">
                <h4>使用情况</h4>
                <p>本月已处理: 15 个文件</p>
                <p>剩余额度: 5 个文件</p>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default ProfilePage; 